Let's learn how to use the paging carrousel plugin for ColdBox found in the ForgeBox directory.  First of all, download the plugin and drop in your custom plugins folder.


Settings setup

Make sure that you setup the following settings in your application:

PagingMaxRows - The maximum number of rows to show per page. Defaults to 10
PagingBandGap - The gap to use in the paging carrousel. Defaults to 5

You can also override the settings on the plugin, by using the appropriate setter methods in the plugin.

Handler setup

In your handler event, my case 'forgeservice.entries' you will setup the paging boundaries and the data call using these boundaries.  In my case, I have a model object that received the starting row and the maximum number of rows to return.  The paging plugin assumes there will be an incoming request collection variables called "page".  You do not need to param it or default it as the plugin does this for you.  All you have to do is construct a nice link with a page holder once you render the paging carrousel.  So to start just get the boundaries from the plugin:

// Get the paging boundaries, make sure there will be a "page" incoming variable, we use it to page.
rc.pageBoundaries = getMyPlugin("Paging").getBoundaries();

The previous call returns a structure with a startRow and maxRow element according to your settings and the page your are on.  You can use this information to present information back to the user like, showing records X to Y, etc.

// Call your model object for data
rc.entries = forgeService.getEntries(orderBy=rc.orderBy,
                                                            typeSlug=rc.typeSlug,
                                                            startrow=rc.pageBoundaries.startRow,
                                                            maxrows=getMyPlugin("Paging").getPagingMaxRows());           

The next tricky part is to get the total count with no paging on it.  I have another method that does this for me, but this can be done in any approach you prefer.

// Get total entries count
rc.entriesTotal = forgeService.getEntriesTotal(typeSlug=rc.typeSlug);

View Setup
That's it for the handler code, now let's render the paging carrousel.  For this make sure you have the correct css setup for it.  The following are what is needed for the paging css:

.pagingTabs - The div container
.pagingTabsTotals - The totals
.pagingTabsCarrousel - The carrousel

Here is my sample css: /* Paging */ .pagingTabs{ font-size: .8em; text-align: left; margin: 20px 10px 15px 10px; } .pagingTabs a{ color: #000; padding: 2px 4px; background-color: #fff; border: 1px solid #ccc; margin-left: 2px; } .pagingTabs a:hover{ color: #000; background-color: #FCF9C3; border: 1px solid black; } .pagingTabs a.selected{ color: #000; background-color: #FCF9C3; border: 1px solid #AF3D15; } .pagingTabsCarrousel{ margin-top:5px; }

Now I can render it in my views:


#getMyPlugin("paging").renderit(foundRows=rc.entriesTotal,link=event.buildLink('forgebox/page/@page@')#


That's it! I tell the paging plugin what is the link to attach to my carrousel and then pass a placeholder variable for my page: @page@.  This renders the carrousel and correct links.